<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>元素距离浏览器窗口顶端和左部的距离</title>
		<style>

			* {
				padding: 0;
				margin: 0;
			}



			#a {
				/*position: relative;*/
				width: 600px;
				height: 600px;
				border: 5px solid black;
				margin: 50px auto 0;
			}

			#b {
				/*position: relative;*/
				width: 400px;
				height: 400px;
				border: 2px solid red;
				background-color: yellow;
				margin: 20px auto 0;
			}

			#c {
				width: 100px;
				height: 100px;
				margin: 20px auto 0;
				border: 2px solid gold;
				background-color: black;
			}

		</style>
	</head>
	<body>

		<div id="a">
			<div id="b">
				<div id="c"></div>
			</div>
		</div>
		
	</body>
</html>
<script>
	
	
	// 获取元素
	var cDiv = document.getElementById('c');

	// console.log(cDiv.offsetTop);
	// console.log(cDiv.offsetTop + cDiv.offsetParent.clientTop + cDiv.offsetParent.offsetTop);

	// console.log(cDiv.offsetTop + cDiv.offsetParent.clientTop + cDiv.offsetParent.offsetTop + cDiv.offsetParent.offsetParent.clientTop + cDiv.offsetParent.offsetParent.offsetTop);
	// body的offsetParent是null
	console.log(document.body.offsetParent);
	function scrollTop(ele) {
		if (!ele || ele === document.body) return 0;
		var s = ele.offsetTop + ele.offsetParent.clientTop + scrollTop(ele.offsetParent);
		return s;
	}

	var r = scrollTop(cDiv);
	console.log(r);




</script>